<template>
    <div class="content">
        <ul class="groupList">
            <li class="group" v-for="(group,index) in groupList" :data-key="index">
                <span>群号：{{group.GroupId}}</span>
                <span>群名称：{{group.GroupName}}</span>
                <span>群主qq：{{group.GroupOwner}}</span>
                <span>成员数：{{group.GroupMemberCount}}</span>
                <span @click="getGroupMember(group)">查看详情</span>
                <ul class="memberList">
                    <li class="member" v-for="(member,idx) in group.members" :data-key="idx">
                        <span>qq号：{{member.MemberUin}}</span>
                        <span>群名片：{{member.AutoRemark}}</span>
                        <span>加入时间：{{member.JoinTime}}</span>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>

<script>
    import {getGroupList,getMemberList} from './../api'
    export default {
        name: "groupManage",
        data(){
            return {
                groupList:[]
            }
        },
        mounted() {
          this.getGroupList();
        },
        methods:{
            getGroupList(){
                let that=this;
                getGroupList().then(res=>{
                    that.groupList=res.TroopList;
                })
            },
            getGroupMember(group){
                let that=this;
                if(group.members) return;
                getMemberList({groupId:group.GroupId}).then(res=>{
                    group.members=res.MemberList
                    that.$forceUpdate()
                })
            }
        }
    }
</script>

<style scoped>

</style>
